// src/components/MenuEditModal.tsx（修改菜单弹框组件）
import React, { useState, useEffect, useCallback } from 'react';
import { Modal, Form, Input, Select, message } from 'antd';
import type { MenuItem } from '../types/menu';
import http from '../api/http';

// 定义弹框Props类型：新增editingMenu（待修改的菜单数据）
interface MenuEditModalProps {
  visible: boolean; // 控制弹框显示/隐藏
  onCancel: () => void; // 取消回调
  onSuccess: () => void; // 修改成功回调（用于刷新列表）
  editingMenu?: MenuItem | null; // 待修改的菜单数据（必传）
}

// 菜单类型枚举
type MenuLevel = 'first' | 'second';
const Edit: React.FC<MenuEditModalProps> = ({ visible, onCancel, onSuccess, editingMenu }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [menuType, setMenuType] = useState<MenuLevel | ''>(''); // 选中的菜单类型
  const [parentMenuList, setParentMenuList] = useState<MenuItem[]>([]); // 上级菜单选项列表

  // 1. 获取所有一级菜单（用于上级菜单下拉框）
  const fetchFirstLevelMenus = useCallback(async () => {
    try {
      const res = await http.get<Array<MenuItem>>('Menus/All');
      if (res.code === '1') {
        // 只保留一级菜单（parentId=0），排除当前修改的菜单（避免自关联）
        const firstLevelMenus = res.data
          ?.filter(menu => menu.parentId === 0 && menu.menuId !== editingMenu?.menuId) 
          || [];
        setParentMenuList(firstLevelMenus);
      }
    } catch (error) {
      message.error('获取上级菜单列表失败');
      console.error('上级菜单查询错误:', error);
    }
  }, [editingMenu]);

  // 2. 弹框显示时：加载一级菜单 + 回显待修改数据
  useEffect(() => {
    if (visible && editingMenu) {
      fetchFirstLevelMenus();
      // 判断原菜单类型（一级：parentId=0；二级：parentId≠0）
      const isFirstLevel = editingMenu.parentId === 0;
      const currentMenuType: MenuLevel = isFirstLevel ? 'first' : 'second';
      setMenuType(currentMenuType);
      
      // 回显数据到表单
      form.setFieldsValue({
        menuId:editingMenu.menuId,
        menuName: editingMenu.menuName,
        menuType: currentMenuType,
        parentId: editingMenu.parentId,
        icon: editingMenu.icon,
        url: editingMenu.url || '' // 地址可能为空（一级菜单）
      });
    } else if (visible && !editingMenu) {
      // 无修改数据时重置表单
      form.resetFields();
      setMenuType('');
    }
  }, [visible, editingMenu, fetchFirstLevelMenus, form]);

  // 3. 处理菜单类型切换：清除残留数据
  const handleMenuTypeChange = useCallback((value: MenuLevel) => {
    setMenuType(value);
    
    if (value === 'first') {
      // 切换到一级菜单：重置parentId为0，清空url
      form.setFieldsValue({ parentId: 0, url: '' });
    } else {
      // 切换到二级菜单：默认选中第一个可用一级菜单
      form.setFieldsValue({ parentId: parentMenuList[0]?.menuId || 0 });
    }
  }, [form, parentMenuList]);

  // 4. 提交修改菜单（调用更新接口）
  const handleSubmit = async () => {
    try {
      if (!editingMenu) return; // 无修改数据时不提交
      
      setLoading(true);
      const values = await form.validateFields();
      
      // 构造修改请求参数（携带menuId用于后端定位数据）
      const submitData: MenuItem = {
        ...editingMenu, // 保留原数据（避免丢失未修改字段）
        menuId:values.menuId,
        menuName: values.menuName,
        parentId: values.parentId,
        icon: values.icon,
        url: menuType === 'second' ? values.url : '',
        lastTime:new Date()
         // 一级菜单清除url
      };

      // 调用修改接口（通常为PUT请求，路径携带menuId）
      console.log("submitdata",submitData)
      const res = await http.put('Menus',submitData);
      if (res.code === '1') {
        message.success(res.msg || '菜单修改成功');
        onSuccess(); // 通知主页面刷新列表
        onCancel(); // 关闭弹框
      } else {
        message.error(`修改失败：${res.msg || '未知错误'}`);
      }
    } catch (error) {
      console.error('菜单修改错误:', error);
      message.error('表单验证失败或请求异常');
    } finally {
      setLoading(false);
    }
  };

  // 弹框标题：根据菜单类型动态显示（如“修改一级菜单-工作台”）
  const getModalTitle = () => {
    if (!editingMenu) return '修改菜单';
    const menuLevelText = editingMenu.parentId === 0 ? '一级菜单' : '二级菜单';
    return `修改${menuLevelText}-${editingMenu.menuName}`;
  };

  return (
    <Modal
      title={getModalTitle()} // 动态标题
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      confirmLoading={loading}
      maskClosable={false}
      width={500}
      destroyOnClose // 关闭时销毁组件，避免数据残留
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{ parentId: 0, menuType: 'first' }}
      >
        {/* 菜单名称（保留原逻辑，支持修改） */}
           <Form.Item
          name="menuId"
          label="菜单编号"
        >
          <Input readOnly placeholder="菜单编号" />
        </Form.Item>
        <Form.Item
          name="menuName"
          label="菜单名称"
          rules={[{ required: true, message: '请输入菜单名称' }, { max: 50, message: '名称不超过50字符' }]}
        >
          <Input placeholder="例如：工作台" />
        </Form.Item>

        {/* 菜单类型（支持切换，联动后续字段） */}
        <Form.Item
          name="menuType"
          label="菜单类型"
          rules={[{ required: true, message: '请选择菜单类型' }]}
        >
          <Select
            placeholder="请选择菜单类型"
            onChange={handleMenuTypeChange}
            allowClear={false}
          >
            <Select.Option value="first">一级菜单</Select.Option>
            <Select.Option value="second">二级菜单</Select.Option>
          </Select>
        </Form.Item>

     
        <Form.Item
          name="parentId"
          label="上级菜单"
          rules={[{ required: true, message: '请选择上级菜单' }]}
          hidden={!menuType}
        >
          <Select placeholder="请选择上级菜单">
            {menuType === 'first' && (
              <Select.Option value={0}>顶级菜单</Select.Option>
            )}
            {menuType === 'second' && parentMenuList.map(menu => (
              <Select.Option key={menu.menuId} value={menu.menuId}>
                {menu.menuName}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        {/* 图标类名（支持修改） */}
        <Form.Item
          name="icon"
          label="图标类名"
          rules={[{ required: true, message: '请输入图标类名' }]}
        
        >
          <Input placeholder="请输入图标" />
        </Form.Item>

      
        <Form.Item
          name="url"
          label="访问地址"
          rules={[{ required: menuType === 'second', message: '二级菜单必须填写访问地址' }]}
          hidden={menuType !== 'second'}
          tooltip="填写前端路由地址，例如：/dashboard"
        >
          <Input placeholder="例如：/dashboard" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export { Edit };